<template>
	<view>
		<view class="box">
			<!-- data-* *可以任何单词，用于同方法传参。或进行判断 -->
			<view class="box-item" @click="showBox" data-code="1">仓库</view>
			<view class="box-item" @click="showBox" data-code="2">军需处</view>
			<view class="box-item" @click="showBox" data-code="3">图鉴</view>
			<view class="box-item" @click="showBox" data-code="4">商场</view>
			<view class="box-item" @click="showBox" data-code="5">好友</view>
			<view class="box-item" @click="showBox" data-code="6">直播间</view>
		</view>
		
		<!-- 模拟弹框效果 -->
		<!-- 遮罩层 -->
		<view class="shade" v-show="ckShow">
			<!-- 内容区域 -->
			<view class="content">
				<view class="close" @click="closeBox">
					<uni-icons type="closeempty" size="30" color="#fff"></uni-icons>
				</view>
				仓库
			</view>
		</view>
		
		<view class="shade" v-show="jxcShow">
			<!-- 内容区域 -->
			<view class="content">
				<view class="close" @click="closeBox">
					<uni-icons type="closeempty" size="30" color="#fff"></uni-icons>
				</view>
				军需处
			</view>
		</view>
		
		<view class="shade" v-show="tjShow">
			<!-- 内容区域 -->
			<view class="content">
				<view class="close" @click="closeBox">
					<uni-icons type="closeempty" size="30" color="#fff"></uni-icons>
				</view>
				图鉴
			</view>
		</view>
		
		<view class="shade" v-show="scShow">
			<!-- 内容区域 -->
			<view class="content">
				<view class="close" @click="closeBox">
					<uni-icons type="closeempty" size="30" color="#fff"></uni-icons>
				</view>
				商城
			</view>
		</view>
		
		
		<view class="shade" v-show="hyShow">
			<!-- 内容区域 -->
			<view class="content">
				<view class="close" @click="closeBox">
					<uni-icons type="closeempty" size="30" color="#fff"></uni-icons>
				</view>
				<AddFriends></AddFriends>
			</view>
		</view>

	</view>
</template>

<script>
import audioManager from '@/utils/audioManager.js';
import AddFriends from './friends/AddFriends.vue';
export default{
	name: "ToolsBox",
	data() {
		return{
			ckShow: false,
			jxcShow: false,
			hyShow: false,
			tjShow: false,
			scShow: false
		}
	},
	components:{
		AddFriends
	},
	methods:{
		showBox(e){
			let code = e.target.dataset.code;
			audioManager.playAudio("dt_btn",false);
			if(code == 1){
				this.ckShow = true;
			}else if(code == 2){
				this.jxcShow = true;
			}else if(code == 3){
				this.tjShow = true;
			}else if(code == 4){
				this.scShow = true;
			}else if(code == 5){
				this.hyShow = true;
			}else if(code == 6){
				uni.navigateTo({
					url:"/pages/live/live"
				})
			}
			
		},
		closeBox(){
			audioManager.playAudio("dt_btn",false);
			this.ckShow = false;
			this.jxcShow = false;
			this.tjShow = false;
			this.scShow = false;
			this.hyShow = false;
		}
	}
}
</script>

<style scoped>
	.box{
		width: 400px;
		height: 50px;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		border-radius: 2px;
	}
	.box-item{
		width: 20%;
		height: 50px;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
	.box-item:hover{
		color: #0cc628;
	}
	.shade{
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 90001;	
	}
	.content{
		width: calc(90% - 40px);
		height: calc(90% - 40px);
		padding: 20px;
		background-color: #fff;
		border-radius: 30px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		color: #000;
	}
	.close{
		width: 40px;
		height: 40px;
		position: absolute;
		right: -10px;
		top: -10px;
		background-color: rgba(0, 0, 0, 0.9);
		border: #fff 2px solid;
		border-radius: 50%;
		text-align: center;
		line-height: 40px;
	}
</style>